<template>
  <!-- 搜索结果页-头部导航 -->
  <div class="search-result-container">
    <!-- 点击实现后退效果 -->
    <van-nav-bar title="搜索结果" left-arrow @click-left="$router.go(-1)" fixed />
    <!-- 展示搜索结果 -->
    <div class="search-result-list">
      <van-list v-model="loading" :finished="done" finished-text="我是有底线的" :immediate-check="false"
        offset="80" @load="pullUpLoadMoreFn">
        <article-item v-for="obj in resultList" :key="obj.art_id" :item="obj" :isCross="false"
          @click.native="$router.push(`/article_detail?id=${obj.art_id}`)" />
        <!-- <ArticleItem v-for="obj in resultList" :key="obj.art_id" :item="obj" /> -->
      </van-list>
    </div>
  </div>
</template>

<script>
import { getSearchResultListAPI } from '@/api/search'
export default {
  name: 'ResultList',
  data () {
    return {
      resultList: [], // 搜索结果列表
      loading: false, // 控制每一页的加载状态
      done: false, // 控制整个列表的加载状态
      page: 1 // 分页的页码
    }
  },
  methods: {
    fn () {
      console.log(1324)
    },
    // 上拉加载更多
    async pullUpLoadMoreFn () {
      const resp = await getSearchResultListAPI({
        keyword: this.$route.params.name,
        page: ++this.page
      })
      const { results } = resp.data.data
      if (results.length < 10) {
        this.done = true
        return
      }
      this.resultList = [...this.resultList, ...results]
      this.loading = false
    }
  },
  async created () {
    const res = await getSearchResultListAPI({ keyword: this.$route.params.name })
    this.resultList = res.data.data.results
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
